<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('主子表提交')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="main-content">
    <form id="form-add" class="form-horizontal">
        <input name="sysCreateUserId" type="hidden" th:value="${user.userId}">
        <h4 class="form-header h4">订购单信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">采购单编号：</label>
                    <div class="col-sm-8">
                        <input name="purId" id="purId" class="form-control" type="text" readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">采购时间：</label>
                    <div class="col-sm-8">
                        <input name="purTime" id="purTime" class="form-control" type="text" readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">审核状态：</label>
                    <div class="col-sm-8">
                        <input name="status" class="form-control" type="hidden" value="1" readonly>
                        <input  class="form-control" type="text" value="未审核" readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">创建人：</label>
                    <div class="col-sm-8">
                        <input name="sysUser.userName" th:value="${user.userName}" readonly class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">总金额：</label>
                    <div class="col-sm-8">
                        <input name="total"  class="form-control" type="text" value="" readonly>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">商品数据</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table" onkeyup="foo()"></table>
                </div>

            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-white btn-sm"  id="totalMoeny" onclick="addMoney()"><i class="fa fa-plus"> 计算所有商品总金额</i></button>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
    $(function() {
        // 初始化数据, 可以由后台传过来
        var data = [
            {

                brandName: "",
                typeName: "",
                productModel:"",
                firmName:"",
                num:"",
                unit:"台",
                price: "",
                money: "",

            }];
        var options = {
            data: data,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='goods[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'brandName',
                    align: 'center',
                    title: '品牌',
                    formatter: function(value, row, index) {
                        var data = [{ index: index, type: value }];
                        return $("#goodsBrand").tmpl(data).html();
                    }
                },
                {
                    field: 'typeName',
                    align: 'center',
                    title: '类型',
                    formatter: function(value, row, index) {
                        var data = [{ index: index, type: value }];
                        return $("#goodsType").tmpl(data).html();
                    }
                },
                {
                    field: 'productModel',
                    align: 'center',
                    title: '型号',
                    formatter: function(value, row, index) {
                        var data = [{ index: index, type: value }];
                        return $("#goodsModel").tmpl(data).html();
                    }
                },
                {
                    field: 'firmName',
                    align: 'center',
                    title: '厂商',
                    formatter: function(value, row, index) {
                        var data = [{ index: index, type: value }];
                        return $("#goodsFirm").tmpl(data).html();
                    }
                },
                {
                    field: 'num',
                    align: 'center',
                    title: '数量',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='detailDemoList[%s].num' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'unit',
                    align: 'center',
                    title: '单位',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='detailDemoList[%s].unit' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'price',
                    align: 'center',
                    title: '单价',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='detailDemoList[%s].price' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'money',
                    align: 'center',
                    title: '金额',
                    formatter: function(value, row, index) {
                        var html =$.common.sprintf("<input class='form-control money' type='text'  name='detailDemoList[%s].money' value='%s'>", index, value);;
                        return html;
                    }
                }]
        };
        $.table.init(options);
    });

    /* 主子表-提交 */
    function submitHandler(index, layero){
        var data = $("#form-add").serializeArray();
        alert(JSON.stringify(data))
        $.operate.saveModal("/purchase/repo/add", data);
    }

    $("input[name='birthday']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    function addColumn() {
        var row = {
            brandName: "",
            typeName: "",
            productModel:"",
            firmName:"",
            count:"",
            unit:"",
            price: "",
            money: "",
        }
        sub.addColumn(row);
    }

    $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
        $("input[name$='date']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true,
            pickerPosition:'top-right'
        });
    });
    function getPurId(){//构建方法
        var date = new Date();
        return "CG"+date.getTime();
    }
    document.getElementById("purId").value = getPurId();//赋给input文本输入框
    function getPurTime(){//构建方法
        var today=new Date();//new 出当前时间
        var h=today.getFullYear();//获取年
        var m=today.getMonth()+1;//获取月
        var d=today.getDate();//获取日
        var H = today.getHours();//获取时
        var M = today.getMinutes();//获取分
        var S = today.getSeconds();//获取秒
        return h+"-"+m+"-"+d+" "+H+":"+M+":"+S; //返回 年-月-日 时:分:秒
    }
    document.getElementById("purTime").value = getPurTime();//将获取到的 年-月-日 时:分:秒 赋给input文本输入框

    //计算单行金额
    function foo(e) {
        e = e || window.event;
        var el = e.Target || e.srcElement
        while(el.nodeName != 'TR') el = el.parentNode;
        var o = el.getElementsByTagName('input');
        o[5].value = o[2].value * o[4].value;//计算单行金额
    }

    function addMoney() {
        var array = {};//定义一个数组
        var array = document.getElementsByClassName('money');
        var total = 0;
        for(j = 0,len=array.length; j < len; j++) {
            total = parseInt(array[j].value) + total;
        }
        document.getElementsByName("total")[0].value=total;
    }
</script>
</body>
</html>

<!-- 商品类型 -->
<script id="goodsFirm" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='detailDemoList[${index}].firmId'>
    <option value="">所有</option>
    <option value="3" >苹果</option>
    <option value="4" >华为</option>
</select>
</div>
</script>
<script id="goodsBrand" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='detailDemoList[${index}].brandId'>
    <option value="">所有</option>
    <option value="5" >苹果</option>
    <option value="3" >华为</option>
</select>
</div>
</script>
<script id="goodsType" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='detailDemoList[${index}].typeId'>
    <option value="">所有</option>
    <option value="1" >电脑</option>
    <option value="10" >手机</option>
</select>
</div>
</script>
<script id="goodsModel" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='detailDemoList[${index}].productModel'>
    <option value="">所有</option>
    <option value="小米10" >小米10</option>
    <option value="拯救者R9000" >拯救者R9000</option>
</select>
</div>
</script>